import React, { Component } from 'react'
import { Layout, Menu, Tag, Avatar, Tooltip, Button, Dropdown, Modal } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    ImportOutlined,
    DownOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
import mobxdata from '../../mobx/data'
import { observer } from 'mobx-react'
import { roleList } from '../../utils';
import { withRouter } from 'react-router-dom'
const { Header, Sider, Content } = Layout;
const { confirm } = Modal;
@observer
@withRouter
class MyHead extends Component {

    toggle = () => {
        mobxdata.changeCollapsed()
    };
    comfirmLogOut = () => (
        confirm({
            title: '退出登录？',
            icon: <ExclamationCircleOutlined />,
            content: '你确定要退出登录吗？',
            okText: "确认",
            cancelText: "取消",
            onOk: () => {
                mobxdata.clsuserinfo()
                localStorage.removeItem('token')
                this.props.history.push('./login')
            },
        })
    )
    render() {
        const { userinfo, collapsed } = mobxdata
        const menu = (
            <Menu>
                <Menu.Item key="0">个人信息</Menu.Item>
                <Menu.Item key="1">修改密码</Menu.Item>
                <Menu.Divider />
                <Menu.Item danger key="2" onClick={this.comfirmLogOut}>退出登录</Menu.Item>
            </Menu>
        )
        return (
            <div className='head-box'>
                <Header className="site-layout-background" style={{ display: 'flex', padding: '0 20px', backgroundColor: '#fff' }}>
                    <p>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                    </p>
                    <marquee>社区管理系统</marquee>
                    {
                        userinfo && <div className="showUser" style={{ display: 'flex' }}>
                            <Dropdown overlay={menu} trigger={['click']} style={{ flexShrink: 0, marginRight: '10px' }}>
                                <span>{userinfo.username}<DownOutlined /></span>
                            </Dropdown>
                            <Tag color={roleList.find(item => item.role === userinfo.role).color}>{roleList.find(item => item.role === userinfo.role).title}</Tag>
                            {
                                userinfo.avator ? <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                                    : <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />

                            }
                            <Tooltip title="退出登录">
                                <Button onClick={this.comfirmLogOut} type="dashed" shape="circle" icon={<ImportOutlined />} />
                            </Tooltip>
                        </div>

                    }
                </Header>
            </div>
        )
    }
}
export default MyHead